// 主题DSL系统 - 基于Proxy的松耦合方案
export interface ThemeDSL {
  // 基础主题变量
  '--theme-mode': 'light' | 'dark'
  '--primary-color': string
  '--accent-color': string
  '--background-color': string
  '--card-background-color': string
  '--text-color': string
  '--text-color-secondary': string
  '--border-color': string
  '--border-color-light': string
  '--shadow-sm': string
  '--shadow-md': string
  '--shadow-lg': string
  '--radius-sm': string
  '--radius-md': string
  '--radius-lg': string
  '--transition-fast': string
  '--transition-normal': string
  '--transition-slow': string
  
  // Element Plus 兼容变量
  '--el-color-primary': string
  '--el-bg-color': string
  '--el-bg-color-page': string
  '--el-text-color-primary': string
  '--el-text-color-regular': string
  '--el-border-color': string
  '--el-border-color-light': string
  
  // Element Plus 滚动条变量
  '--el-scrollbar-opacity': string
  '--el-scrollbar-bg-color': string
  '--el-scrollbar-hover-opacity': string
  '--el-scrollbar-hover-bg-color': string
  
  // 扩展变量（支持动态添加）
  [key: string]: string | number
}

// 字体颜色配置 - 由模式控制
const TEXT_COLOR_PRESETS = {
  light: {
    '--text-color': '#333333',
    '--text-color-secondary': '#666666',
    '--el-text-color-primary': '#333333',
    '--el-text-color-regular': '#666666',
    '--el-text-color-secondary': '#909399',
    '--el-text-color-placeholder': '#a8abb2',
    '--el-text-color-disabled': '#c0c4cc',
    '--el-menu-text-color': '#333333',
    '--el-menu-hover-text-color': '#409eff',
    '--el-menu-active-color': '#409eff'
  },
  dark: {
    '--text-color': '#ffffff',
    '--text-color-secondary': '#cccccc',
    '--el-text-color-primary': '#ffffff',
    '--el-text-color-regular': '#ffffff',
    '--el-text-color-secondary': '#cccccc',
    '--el-text-color-placeholder': '#999999',
    '--el-text-color-disabled': '#666666',
    '--el-menu-text-color': '#ffffff',
    '--el-menu-hover-text-color': '#ffffff',
    '--el-menu-active-color': '#ffffff'
  }
}

// 基础主题配置 - 包含完整的浅色和深色模式
export const THEME_PRESETS: Record<string, Partial<ThemeDSL>> = {
  light: {
    '--theme-mode': 'light',
    '--primary-color': '#409eff',
    '--accent-color': '#79bbff',
    '--background-color': '#fcfcfc',
    '--card-background-color': '#ffffff',
    '--border-color': '#e8e8e8',
    '--border-color-light': '#f0f0f0',
    '--shadow-sm': '0 1px 3px rgba(0, 0, 0, 0.1)',
    '--shadow-md': '0 4px 6px rgba(0, 0, 0, 0.1)',
    '--shadow-lg': '0 10px 15px rgba(0, 0, 0, 0.1)',
    '--radius-sm': '4px',
    '--radius-md': '8px',
    '--radius-lg': '12px',
    '--transition-fast': '0.15s ease',
    '--transition-normal': '0.3s ease',
    '--transition-slow': '0.5s ease',
    // Element Plus 兼容变量
    '--el-color-primary': '#409eff',
    '--el-bg-color': '#ffffff',
    '--el-bg-color-page': '#fcfcfc',
    '--el-border-color': '#e8e8e8',
    '--el-border-color-light': '#f0f0f0',
    '--el-border-color-lighter': '#f5f7fa',
    '--el-border-color-extra-light': '#fafafa',
    '--el-border-color-dark': '#d4d7de',
    '--el-border-color-darker': '#cdd0d6',
    '--el-fill-color': '#f0f2f5',
    '--el-fill-color-light': '#f5f7fa',
    '--el-fill-color-lighter': '#fafafa',
    '--el-fill-color-extra-light': '#fcfcfc',
    '--el-fill-color-blank': '#ffffff',
    '--el-fill-color-dark': '#ebedf0',
    '--el-fill-color-darker': '#e6e8eb',
    '--el-menu-bg-color': '#ffffff',
    '--el-menu-active-bg-color': '#ecf5ff',
    '--el-menu-item-height': '56px',
    '--el-menu-sub-item-height': '50px',
    '--el-menu-horizontal-height': '60px',
    '--el-menu-horizontal-sub-item-height': '36px',
    '--el-menu-item-font-size': '14px',
    '--el-menu-item-hover-fill': '#ecf5ff',
    '--el-menu-border-color': '#e8e8e8',
    '--el-menu-base-level-padding': '20px',
    '--el-menu-level-padding': '20px',
    '--el-menu-icon-width': '24px',
    '--el-menu-collapse-width': '64px',
    '--el-menu-collapse-icon-width': '24px',
    '--el-menu-collapse-transition-duration': '0.3s',
    // Element Plus 滚动条变量
    '--el-scrollbar-opacity': '0.3',
    '--el-scrollbar-bg-color': 'var(--el-text-color-secondary)',
    '--el-scrollbar-hover-opacity': '0.5',
    '--el-scrollbar-hover-bg-color': 'var(--el-text-color-secondary)',
    // 字体颜色
    ...TEXT_COLOR_PRESETS.light
  },
  dark: {
    '--theme-mode': 'dark',
    '--primary-color': '#409eff',
    '--accent-color': '#79bbff',
    '--background-color': '#1a1a1a',
    '--card-background-color': '#2a2a2a',
    '--border-color': '#404040',
    '--border-color-light': '#333333',
    '--shadow-sm': '0 1px 3px rgba(0, 0, 0, 0.3)',
    '--shadow-md': '0 4px 6px rgba(0, 0, 0, 0.3)',
    '--shadow-lg': '0 10px 15px rgba(0, 0, 0, 0.3)',
    '--radius-sm': '4px',
    '--radius-md': '8px',
    '--radius-lg': '12px',
    '--transition-fast': '0.15s ease',
    '--transition-normal': '0.3s ease',
    '--transition-slow': '0.5s ease',
    // Element Plus 兼容变量
    '--el-color-primary': '#409eff',
    '--el-bg-color': '#2a2a2a',
    '--el-bg-color-page': '#1a1a1a',
    '--el-border-color': '#404040',
    '--el-border-color-light': '#333333',
    '--el-border-color-lighter': '#2a2a2a',
    '--el-border-color-extra-light': '#1f1f1f',
    '--el-border-color-dark': '#4c4d4f',
    '--el-border-color-darker': '#58595b',
    '--el-fill-color': '#2a2a2a',
    '--el-fill-color-light': '#333333',
    '--el-fill-color-lighter': '#3a3a3a',
    '--el-fill-color-extra-light': '#4a4a4a',
    '--el-fill-color-blank': '#1a1a1a',
    '--el-fill-color-dark': '#1f1f1f',
    '--el-fill-color-darker': '#151515',
    '--el-menu-bg-color': '#2a2a2a',
    '--el-menu-active-bg-color': '#1a1a1a',
    '--el-menu-item-height': '56px',
    '--el-menu-sub-item-height': '50px',
    '--el-menu-horizontal-height': '60px',
    '--el-menu-horizontal-sub-item-height': '36px',
    '--el-menu-item-font-size': '14px',
    '--el-menu-item-hover-fill': '#1a1a1a',
    '--el-menu-border-color': '#404040',
    '--el-menu-base-level-padding': '20px',
    '--el-menu-level-padding': '20px',
    '--el-menu-icon-width': '24px',
    '--el-menu-collapse-width': '64px',
    '--el-menu-collapse-icon-width': '24px',
    '--el-menu-collapse-transition-duration': '0.3s',
    // Element Plus 滚动条变量
    '--el-scrollbar-opacity': '0.3',
    '--el-scrollbar-bg-color': 'var(--el-text-color-secondary)',
    '--el-scrollbar-hover-opacity': '0.5',
    '--el-scrollbar-hover-bg-color': 'var(--el-text-color-secondary)',
    // 字体颜色
    ...TEXT_COLOR_PRESETS.dark
  }
}

// 颜色主题配置 - 包含完整的配色方案（背景、字体、边框等）
export const COLOR_PRESETS: Record<string, Partial<ThemeDSL>> = {
  ins: {
    // 主色调 - 高级INS风格：温暖的珊瑚粉
    '--primary-color': '#ff6b6b',
    '--accent-color': '#ff8e8e',
    '--el-color-primary': '#ff6b6b',
    
    // 背景色系 - 极简主义白色调
    '--background-color': '#fafafa',
    '--card-background-color': '#ffffff',
    '--el-bg-color': '#ffffff',
    '--el-bg-color-page': '#fafafa',
    
    // 边框色系 - 细腻的灰色边框
    '--border-color': '#e8e8e8',
    '--border-color-light': '#f0f0f0',
    '--el-border-color': '#e8e8e8',
    '--el-border-color-light': '#f0f0f0',
    '--el-border-color-lighter': '#f5f5f5',
    '--el-border-color-extra-light': '#fafafa',
    
    // 填充色系 - 淡雅的背景填充
    '--el-fill-color': '#f5f5f5',
    '--el-fill-color-light': '#f8f8f8',
    '--el-fill-color-lighter': '#fafafa',
    '--el-fill-color-extra-light': '#fcfcfc',
    '--el-fill-color-blank': '#ffffff',
    
    // 菜单色系 - 简洁的菜单设计
    '--el-menu-bg-color': '#ffffff',
    '--el-menu-active-bg-color': '#fff5f5',
    '--el-menu-item-hover-fill': '#fff5f5',
    '--el-menu-border-color': '#e8e8e8',
    
    // 字体颜色 - 高级灰色系
    '--text-color': '#2c2c2c',
    '--text-color-secondary': '#666666',
    '--el-text-color-primary': '#2c2c2c',
    '--el-text-color-regular': '#666666',
    '--el-text-color-secondary': '#999999',
    '--el-text-color-placeholder': '#b3b3b3',
    '--el-text-color-disabled': '#cccccc',
    '--el-menu-text-color': '#2c2c2c',
    '--el-menu-hover-text-color': '#ff6b6b',
    '--el-menu-active-color': '#ff6b6b'
  },
  dopamine: {
    // 主色调 - 活力多巴胺配色：渐变粉紫
    '--primary-color': '#ff6b9d',
    '--accent-color': '#c44569',
    '--el-color-primary': '#ff6b9d',
    
    // 背景色系 - 温暖的粉色渐变
    '--background-color': '#fff8fc',
    '--card-background-color': '#ffffff',
    '--el-bg-color': '#ffffff',
    '--el-bg-color-page': '#fff8fc',
    
    // 边框色系 - 柔和的粉色边框
    '--border-color': '#ffb3d1',
    '--border-color-light': '#ffe0ec',
    '--el-border-color': '#ffb3d1',
    '--el-border-color-light': '#ffe0ec',
    '--el-border-color-lighter': '#ffeef5',
    '--el-border-color-extra-light': '#fff5f9',
    
    // 填充色系 - 温暖的粉色填充
    '--el-fill-color': '#ffeef5',
    '--el-fill-color-light': '#fff2f7',
    '--el-fill-color-lighter': '#fff5f9',
    '--el-fill-color-extra-light': '#fff8fc',
    '--el-fill-color-blank': '#ffffff',
    
    // 菜单色系 - 活泼的菜单设计
    '--el-menu-bg-color': '#ffffff',
    '--el-menu-active-bg-color': '#ffe0ec',
    '--el-menu-item-hover-fill': '#ffe0ec',
    '--el-menu-border-color': '#ffb3d1',
    
    // 字体颜色 - 温暖的深色系
    '--text-color': '#2d1b2e',
    '--text-color-secondary': '#6b4c6d',
    '--el-text-color-primary': '#2d1b2e',
    '--el-text-color-regular': '#6b4c6d',
    '--el-text-color-secondary': '#8b6b8d',
    '--el-text-color-placeholder': '#a88baa',
    '--el-text-color-disabled': '#c5a8c7',
    '--el-menu-text-color': '#2d1b2e',
    '--el-menu-hover-text-color': '#ff6b9d',
    '--el-menu-active-color': '#ff6b9d'
  }
}

// 主题DSL管理器
class ThemeDSLManager {
  private dsl: ThemeDSL = {} as ThemeDSL
  private proxy: ThemeDSL
  private listeners: Set<(dsl: ThemeDSL) => void> = new Set()
  private storageKey = 'theme-dsl'
  private isInitializing = false

  constructor() {
    // 创建Proxy监听器
    this.proxy = new Proxy(this.dsl, {
      set: (target, property, value) => {
        const key = String(property)
        target[key] = value
        
        // 更新CSS变量
        this.updateCSSVariable(key, value)
        
        // 保存到localStorage（初始化期间不保存）
        if (!this.isInitializing) {
          this.saveToStorage()
          this.notifyListeners()
          this.notifyMicroApps()
        }
        
        return true
      },
      get: (target, property) => {
        return target[String(property)]
      }
    })

    // 初始化
    this.init()
  }

  private init() {
    this.isInitializing = true
    
    // 从localStorage加载
    this.loadFromStorage()
    
    // 挂载到window
    this.mountToWindow()
    
    // 如果没有保存的主题，应用默认主题
    if (Object.keys(this.dsl).length === 0) {
      console.log('[ThemeDSL] 首次初始化，应用默认主题')
      this.setVariables(THEME_PRESETS.light)
    } else {
      console.log('[ThemeDSL] 从存储恢复主题设置:', Object.keys(this.dsl).length, '个变量')
    }
    
    // 应用初始主题
    this.applyTheme()
    
    this.isInitializing = false
    
    // 初始化完成后，保存当前状态（确保有数据被保存）
    this.saveToStorage()
  }

  private loadFromStorage() {
    try {
      const saved = localStorage.getItem(this.storageKey)
      if (saved) {
        const parsed = JSON.parse(saved)
        // 验证数据完整性
        if (this.validateThemeData(parsed)) {
          // 直接赋值到dsl对象，避免触发Proxy的set方法
          Object.assign(this.dsl, parsed)
          console.log('[ThemeDSL] 成功从localStorage加载主题配置，包含', Object.keys(parsed).length, '个变量')
        } else {
          console.warn('[ThemeDSL] 存储的主题数据不完整，将使用默认主题')
          localStorage.removeItem(this.storageKey)
        }
      }
    } catch (error) {
      console.warn('[ThemeDSL] Failed to load from storage:', error)
      // 清理损坏的数据
      localStorage.removeItem(this.storageKey)
    }
  }

  private validateThemeData(data: any): boolean {
    if (!data || typeof data !== 'object') {
      return false
    }
    
    // 检查必要的主题变量
    const requiredKeys = ['--theme-mode', '--primary-color', '--background-color']
    return requiredKeys.every(key => data.hasOwnProperty(key))
  }

  private saveToStorage() {
    try {
      const dataToSave = JSON.stringify(this.dsl)
      localStorage.setItem(this.storageKey, dataToSave)
      console.log('[ThemeDSL] 主题配置已保存到localStorage')
    } catch (error) {
      console.warn('[ThemeDSL] Failed to save to storage:', error)
      // 如果存储失败，尝试清理旧数据后重试
      try {
        localStorage.removeItem(this.storageKey)
        localStorage.setItem(this.storageKey, JSON.stringify(this.dsl))
        console.log('[ThemeDSL] 清理后重新保存成功')
      } catch (retryError) {
        console.error('[ThemeDSL] 重试保存失败:', retryError)
      }
    }
  }

  private mountToWindow() {
    if (typeof window !== 'undefined') {
      (window as any).__THEME_DSL__ = this.proxy
      console.log('[ThemeDSL] Mounted to window.__THEME_DSL__')
    }
  }

  private updateCSSVariable(key: string, value: string | number) {
    if (typeof document !== 'undefined') {
      document.documentElement.style.setProperty(key, String(value))
    }
  }

  private notifyListeners() {
    this.listeners.forEach(listener => {
      try {
        listener({ ...this.dsl })
      } catch (error) {
        console.warn('[ThemeDSL] Listener error:', error)
      }
    })
  }

  private notifyMicroApps() {
    if (typeof window !== 'undefined') {
      window.postMessage({
        type: 'THEME_DSL_CHANGE',
        dsl: { ...this.dsl }
      }, '*')
    }
  }

  private applyTheme() {
    // 应用所有变量到CSS
    Object.entries(this.dsl).forEach(([key, value]) => {
      this.updateCSSVariable(key, value)
    })

    // 设置body类名和Element Plus暗色主题
    const themeMode = this.dsl['--theme-mode'] || 'light'
    if (typeof document !== 'undefined') {
      document.body.className = themeMode === 'dark' ? 'dark-theme' : 'light-theme'
      document.documentElement.classList.toggle('dark', themeMode === 'dark')
      
      // Element Plus 官方暗色主题支持
      if (themeMode === 'dark') {
        document.documentElement.classList.add('dark')
      } else {
        document.documentElement.classList.remove('dark')
      }
    }
  }

  // 公共方法
  public setVariable(key: string, value: string | number) {
    this.proxy[key] = value
  }

  public getVariable(key: string): string | number | undefined {
    return this.proxy[key]
  }

  public setVariables(variables: Partial<ThemeDSL>) {
    // 批量设置变量，避免多次触发保存
    let hasChanges = false
    Object.entries(variables).forEach(([key, value]) => {
      if (value !== undefined && this.dsl[key] !== value) {
        this.dsl[key] = value
        this.updateCSSVariable(key, value)
        hasChanges = true
      }
    })
    
    // 如果有变化，统一保存和通知（初始化期间不保存）
    if (hasChanges && !this.isInitializing) {
      this.saveToStorage()
      this.notifyListeners()
      this.notifyMicroApps()
    }
  }

  public getAllVariables(): ThemeDSL {
    return { ...this.dsl }
  }

  public applyPreset(presetName: string) {
    const preset = THEME_PRESETS[presetName]
    if (preset) {
      this.setVariables(preset)
    }
  }

  // 应用颜色主题（完整配色方案）
  public applyColorTheme(colorThemeName: string) {
    const colorPreset = COLOR_PRESETS[colorThemeName]
    if (!colorPreset) {
      console.warn(`[ThemeDSL] Color theme "${colorThemeName}" not found`)
      return
    }

    // 直接应用完整的颜色主题（包含字体颜色）
    this.setVariables(colorPreset)
    
    console.log(`[ThemeDSL] Applied color theme "${colorThemeName}" with complete color scheme`)
  }

  // 切换模式（浅色/深色）
  public toggleMode() {
    const currentMode = this.dsl['--theme-mode'] || 'light'
    const newMode = currentMode === 'light' ? 'dark' : 'light'
    this.setMode(newMode)
  }

  // 设置模式
  public setMode(mode: 'light' | 'dark') {
    // 应用基础主题配置
    const basePreset = THEME_PRESETS[mode]
    if (basePreset) {
      this.setVariables(basePreset)
    }
    
    console.log(`[ThemeDSL] Switched to ${mode} mode`)
  }

  // 获取当前模式
  public getCurrentMode(): 'light' | 'dark' {
    return (this.dsl['--theme-mode'] as 'light' | 'dark') || 'light'
  }

  // 获取当前颜色主题名称
  public getCurrentColorTheme(): string {
    const primaryColor = this.dsl['--primary-color']
    if (!primaryColor) return 'default'
    
    // 根据主色调判断当前颜色主题
    for (const [name, preset] of Object.entries(COLOR_PRESETS)) {
      if (preset['--primary-color'] === primaryColor) {
        return name
      }
    }
    return 'default'
  }

  public addListener(listener: (dsl: ThemeDSL) => void) {
    this.listeners.add(listener)
    return () => this.listeners.delete(listener)
  }

  public getProxy(): ThemeDSL {
    return this.proxy
  }

  // 清除存储的主题数据
  public clearStorage() {
    try {
      localStorage.removeItem(this.storageKey)
      console.log('[ThemeDSL] 已清除存储的主题数据')
    } catch (error) {
      console.warn('[ThemeDSL] 清除存储失败:', error)
    }
  }

  // 获取存储状态信息
  public getStorageInfo() {
    try {
      const saved = localStorage.getItem(this.storageKey)
      if (saved) {
        const parsed = JSON.parse(saved)
        return {
          exists: true,
          size: saved.length,
          variableCount: Object.keys(parsed).length,
          isValid: this.validateThemeData(parsed)
        }
      }
      return { exists: false, size: 0, variableCount: 0, isValid: false }
    } catch (error) {
      return { exists: false, size: 0, variableCount: 0, isValid: false, error: (error as Error).message }
    }
  }
}

// 创建全局实例
export const themeDSL = new ThemeDSLManager()

// 导出便捷函数
export const useThemeDSL = () => {
  return {
    setVariable: themeDSL.setVariable.bind(themeDSL),
    getVariable: themeDSL.getVariable.bind(themeDSL),
    setVariables: themeDSL.setVariables.bind(themeDSL),
    getAllVariables: themeDSL.getAllVariables.bind(themeDSL),
    applyPreset: themeDSL.applyPreset.bind(themeDSL),
    applyColorTheme: themeDSL.applyColorTheme.bind(themeDSL),
    setMode: themeDSL.setMode.bind(themeDSL),
    toggleMode: themeDSL.toggleMode.bind(themeDSL),
    getCurrentMode: themeDSL.getCurrentMode.bind(themeDSL),
    getCurrentColorTheme: themeDSL.getCurrentColorTheme.bind(themeDSL),
    addListener: themeDSL.addListener.bind(themeDSL),
    getProxy: themeDSL.getProxy.bind(themeDSL),
    clearStorage: themeDSL.clearStorage.bind(themeDSL),
    getStorageInfo: themeDSL.getStorageInfo.bind(themeDSL)
  }
}

// 声明全局类型
declare global {
  interface Window {
    __THEME_DSL__: ThemeDSL
  }
}
